<!--
 * @Author: yang_jl@ecidi.com
 * @Date: 2020-03-31 16:40:16
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-04-15 08:57:11
 * @Description: 岗位内成员详情页
 -->
<template>
  <div class="post-people-container">
    <fks-query-page
      ref="peopleTable"
      v-loading="loading"
      class="peopleManage"
      :data="list"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      :table-name="`${postName}-成员列表`"
      @sort-change="sortHandler"
      @query="fetchData"
      @row-click="rowClick"
      @selection-change="handleSelect"
    >
      <template slot="singleSearch">
        <div class="single-searchBox">
          <fks-input
            v-model="selectName"
            size
            class="single-searchBox-item"
            :placeholder="LANG.MEMBER_SEARCH_PLACEHOLDER"
            clearable
            maxlength="50"
            @clear="search"
            @keyup.enter.native="search"
          >
            <fks-button slot="append" icon="fks-icon-search" @click="search" />
          </fks-input>
          <fks-button
            icon="fks-icon-delete"
            class="deleteButton"
            @click="handleDelete"
          >
            <span>{{ LANG.BATCH_DELETE }}</span>
          </fks-button>
          <fks-user-selector-pro
            ref="selector"
            :multi-portal="false"
            multiple
            show-all-user
            :params="userSelectParams"
            url
            width="auto"
            @change="addMembers"
          >
            <fks-button slot="reference" icon="fks-icon-plus" type="primary">
              <span> {{ LANG.ADD_POST }}</span>
            </fks-button>
          </fks-user-selector-pro>
        </div>
      </template>
      <template>
        <fks-table-column align="center" label="#" type="selection" />
        <fks-table-column
          align="center"
          :label="LANG.USER_FULL_NAME"
          prop="userFullname"
          sortable="custom"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.userFullname }}
          </template>
        </fks-table-column>
        <fks-table-column
          :label="LANG.USERNAME"
          min-width="120"
          prop="userName"
          align="center"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
  </div>
</template>

<script type="text/ecmascript-6">
import * as Auth from "../api";
import * as types from "@/store/Getter/getterTypes.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    postName: {
      type: String,
      default: "",
    },
    postId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      userSelectParams: {
        portalId: "",
      },
      list: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      name: "",
      addUserIdList: [],
      selectName: "",
      delList: [],
      show: this.visible,
      loading: false,
      sort: "",
      columnName: "",
    };
  },
  computed: {
    portalId() {
      return this.$store.state.portal.id;
    },
    type() {
      return this.$store.state.portal.type;
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL];
    },
  },
  watch: {
    visible() {
      this.show = this.visible;
    },
    postId: {
      deep: true,
      immediate: true,
      handler(val) {
        this.fetchData();
      },
    },
  },
  methods: {
    //列表排序
    sortHandler(data) {
      let params = {};
      if (!data.order) {
        this.sort = "";
        this.columnName = "";
      } else {
        this.sort = data.order == "ascending" ? "asc" : "desc";
        this.columnName =
          data.prop == "userFullname" ? "user_fullname" : "user_name";
      }
      params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        searchValue: this.selectName,
        portalId: this.portalId,
        postId: this.postId,
        sort: this.sort,
        columnName: this.columnName,
      };
      this.getDataList(params);
    },
    //点击表格回调
    rowClick(row) {
      this.$refs.peopleTable.$refs.table.toggleRowSelection(
        row,
        this.changeSelected(row)
      );
    },
    //点击后修改选中状态
    changeSelected(row) {
      let w = true;
      this.delList.forEach((item) => {
        if (item == row.id) {
          w = false;
        }
      });
      return w;
    },
    //获取岗位下人员数据
    fetchData() {
      if (!this.postId) {
        return false;
      }
      let params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        searchValue: this.selectName,
        postId: this.postId,
        portalId: this.portalId,
      };
      this.getDataList(params);
    },
    //获取岗位下人员数据
    getDataList(params) {
      this.loading = true;
      Auth.getRoleGroupUser(params)
        .then((res) => {
          if (res.status && res.data) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //岗位内新增成员
    addMembers(userList) {
      if (userList.length < 1) {
        return false;
      } else {
        userList.forEach((item) => {
          this.addUserIdList.push(item.id);
        });
      }
      if (this.multiPortal) {
        Auth.updatePortal(
          Object.assign(
            { id: this.portalId },
            { addUserIdList: this.addUserIdList }
          )
        )
          .then((res) => {
            if (res.status) {
              this.savePost();
            }
          })
          .catch(() => {});
      } else {
        this.savePost();
      }
    },
    //岗位下新增人员
    savePost() {
      Auth.savePost({
        addUserIdList: this.addUserIdList,
        deleteUserIdList: [],
        portalId: this.multiPortal ? this.portalId : "",
        type: this.multiPortal ? this.type : "",
        id: this.postId,
      })
        .then((res) => {
          if (res.status) {
            this.$message({
              message: this.LANG.ADD_PEOPLE_SUCCESS,
              type: "success",
            });
            this.addUserIdList = [];
            this.fetchData();
            this.$emit("refresh");
            this.$refs.selector.sureList = [];
          }
        })
        .catch(() => {});
    },
    //关闭弹窗
    close() {
      this.selectName = "";
      this.show = false;
      this.$emit("update:visible", this.show);
    },
    //清空搜索条件回调
    search() {
      this.currentPage = 1;
      this.fetchData();
    },
    //选中项发生变化时回调
    handleSelect(val) {
      this.delList = val.map((item) => {
        return item.id;
      });
    },
    //岗位内删除成员
    handleDelete() {
      if (this.delList.length == 0) {
        this.$message.error(this.LANG.DELETE_EMPTY_TIP);
        return;
      }
      this.$confirm(this.LANG.POSITION_MOVE_CONFIRM, {
        title: this.LANG.TIPS,
        type: "warning",
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: "fks-button--danger",
        deleteMode: true,
      })
        .then(() => {
          Auth.savePost({
            addUserIdList: [],
            deleteUserIdList: this.delList,
            id: this.postId,
          })
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.DELETE_SUCCESS);
                this.fetchData();
                this.$emit("refresh");
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.post-people-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.deleteButton {
  border-color: #ff4d4f;
  color: #ff4d4f;
  margin-right: 8px;
}
</style>
